Hrvatski

Dubinski uvid u Next.js Interception Routes, prikazujući praktične strategije implementacije modala i overlaya za poboljšana korisnička iskustva.

Next.js Interception Routes: Ovladavanje modalnim i overlay obrascima

Next.js, popularan React framework, nudi moćne značajke za izradu performantnih i skalabilnih web aplikacija. Jedna takva značajka, Interception Routes, pruža sofisticiran način za rukovanje složenim scenarijima usmjeravanja, posebno pri implementaciji modalnih i overlay obrazaca. Ovaj sveobuhvatni vodič istražuje kako iskoristiti Interception Routes za stvaranje besprijekornih i privlačnih korisničkih iskustava.

Što su Interception Routes?

Interception Routes omogućuju vam da presretnete rutu i prikažete drugačije korisničko sučelje bez promjene URL-a u pregledniku. Zamislite to kao privremeno skretanje koje obogaćuje korisničko iskustvo. Ovo je posebno korisno za:

Zašto koristiti Interception Routes za modale i overlaye?

Tradicionalne metode rukovanja modalima i overlayima često uključuju upravljanje stanjem unutar komponente, što može postati složeno i dovesti do problema s performansama. Interception Routes nude nekoliko prednosti:

Postavljanje Interception Routes u Next.js-u

Ilustrirajmo kako implementirati Interception Routes praktičnim primjerom: stvaranjem modala za prikaz detalja proizvoda u aplikaciji za e-trgovinu.

Struktura projekta

Prvo, definirajmo strukturu direktorija. Pretpostavimo da imamo direktorij `products` gdje svaki proizvod ima jedinstveni ID.

app/
  products/
    [id]/
      page.js       // Stranica s detaljima proizvoda
    @modal/
      [id]/
        page.js   // Sadržaj modala za detalje proizvoda
    default.js  // Layout za direktorij proizvoda
  page.js           // Početna stranica

Objašnjenje

Implementacija koda

1. Početna stranica (app/page.js)

Ova stranica prikazuje popis proizvoda, od kojih svaki ima poveznicu koja otvara detalje proizvoda u modalu.

// app/page.js
import Link from 'next/link';

const products = [
 { id: '1', name: 'Prijenosno računalo' },
 { id: '2', name: 'Pametni telefon' },
 { id: '3', name: 'Tablet' },
];

export default function Home() {
 return (
 

Popis proizvoda

    {products.map((product) => (
  • {product.name}
  • ))}
); }

2. Stranica s detaljima proizvoda (app/products/[id]/page.js)

Ova stranica prikazuje pune detalje o proizvodu. U stvarnoj aplikaciji, ovo bi dohvaćalo podatke s API-ja ili iz baze podataka. Važno je da pruža poveznicu natrag na originalni popis proizvoda.

// app/products/[id]/page.js
import Link from 'next/link';

export default function ProductDetails({ params }) {
 const { id } = params;

 return (
 

Detalji proizvoda

ID proizvoda: {id}

Ovo je puna stranica s detaljima proizvoda.

Natrag na popis proizvoda
); }

3. Sadržaj modala (app/products/@modal/[id]/page.js)

Ovo je ključni dio – Interception Route. Prikazuje sadržaj modala koristeći isti ID proizvoda. Primijetite `useParams` hook za pristup ID-u.

// app/products/@modal/[id]/page.js
'use client';

import { useParams } from 'next/navigation';
import styles from './modal.module.css';

export default function ProductModal() {
 const params = useParams();
 const { id } = params;

 return (
 

Modal proizvoda

ID proizvoda: {id}

Ovaj sadržaj se prikazuje unutar modala!

history.back()}>Zatvori modal
); }

Napomena: Direktiva `'use client';` je neophodna za interaktivnost na klijentskoj strani, posebno pri korištenju `useParams`.

Stiliziranje (modal.module.css): Jednostavan CSS modul koristi se za osnovno stiliziranje modala. To je ključno za ispravno pozicioniranje modala.

/* modal.module.css */

.modalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Osigurava da je na vrhu */
}

.modalContent {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 80%;
  max-width: 600px;
}

4. Layout (app/products/default.js)

Ovaj layout omotava `@modal` rutu, osiguravajući da se prikazuje unutar konteksta proizvoda.

// app/products/default.js
export default function ProductsLayout({ children }) {
 return (
 
{children}
); }

Kako to radi

  1. Kada korisnik klikne na poveznicu proizvoda na početnoj stranici (npr. `/products/1`), Next.js to prepoznaje kao rutu unutar direktorija `products`.
  2. Zbog `@modal` presretajuće rute, Next.js provjerava postoji li odgovarajuća ruta pod `@modal`.
  3. Ako se pronađe podudaranje (npr. `/products/@modal/1`), Next.js prikazuje sadržaj iz `app/products/@modal/[id]/page.js` unutar trenutne stranice. URL u pregledniku ostaje `/products/1`.
  4. Stilovi `modalOverlay` pozicioniraju modal povrh temeljnog sadržaja.
  5. Klikom na "Zatvori modal" koristi se `history.back()` za povratak, što efektivno zatvara modal i vraća se na prethodno stanje.

Napredne tehnike Interception Routes

1. Rukovanje gumbom za povratak

Ključan aspekt implementacije modala je osiguravanje ispravnog ponašanja s gumbom za povratak u pregledniku. Kada korisnik otvori modal, a zatim klikne gumb za povratak, idealno bi bilo da se modal zatvori i da se korisnik vrati u prethodni kontekst, a ne da napusti aplikaciju.

Metoda `history.back()` korištena u primjeru postiže ovaj efekt navigacijom jedan korak unatrag u povijesti preglednika. Međutim, za složenije scenarije možda ćete morati implementirati prilagođeni rukovatelj gumbom za povratak koji uzima u obzir trenutno stanje usmjeravanja.

2. Dinamički sadržaj modala

U stvarnim aplikacijama, sadržaj modala će vjerojatno biti dinamičan, dohvaćen s API-ja ili iz baze podataka na temelju ID-a proizvoda. Možete koristiti `fetch` API ili biblioteku za dohvaćanje podataka poput SWR-a ili React Queryja unutar modalne komponente kako biste dohvatili potrebne podatke.

// app/products/@modal/[id]/page.js
'use client';

import { useParams } from 'next/navigation';
import { useState, useEffect } from 'react';

export default function ProductModal() {
 const params = useParams();
 const { id } = params;
 const [product, setProduct] = useState(null);

 useEffect(() => {
 async function fetchProduct() {
 const res = await fetch(`/api/products/${id}`); // Zamijenite sa svojim API endpointom
 const data = await res.json();
 setProduct(data);
 }

 fetchProduct();
 }, [id]);

 if (!product) {
 return 

Učitavanje...

; } return (

{product.name}

{product.description}

{/* ... ostali detalji o proizvodu ... */} history.back()}>Zatvori modal
); }

3. Ugniježđeni modali

Interception Routes mogu se ugniježđivati kako bi se stvorili složeni tijekovi rada s modalima. Na primjer, korisnik može otvoriti modal s detaljima proizvoda, a zatim kliknuti gumb za otvaranje modala s povezanim proizvodom. To se može postići stvaranjem dodatnih presretajućih ruta unutar direktorija `@modal`.

4. Rukovanje 404 greškama

Razmotrite scenarij u kojem korisnik navigira na URL modala s nevažećim ID-om proizvoda (npr. `/products/@modal/nonexistent`). Trebali biste implementirati ispravno rukovanje greškama kako biste prikazali korisniku prijateljsku 404 stranicu ili ga preusmjerili na važeću stranicu proizvoda.

// app/products/@modal/[id]/page.js

// ... (ostatak komponente)

 if (!product) {
 return 

Proizvod nije pronađen.

; // Ili preusmjerite na 404 stranicu } // ... (ostatak komponente)

5. Overlay obrasci

Iako su se primjeri fokusirali na modale, Interception Routes se također mogu koristiti za overlaye. Umjesto centriranja sadržaja, overlay se može pojaviti kao bočna traka ili panel koji klizi sa strane ekrana. CSS stiliziranje bi bilo drugačije, ali logika usmjeravanja ostaje ista.

Primjeri iz stvarnog svijeta i slučajevi upotrebe

Primjer: Međunarodna platforma za e-trgovinu Zamislite globalnu stranicu za e-trgovinu. Kada korisnik klikne na proizvod, detalji se otvaraju u modalu. URL se mijenja u `/products/[product_id]`, omogućujući izravno povezivanje i SEO prednosti. Ako korisnik promijeni jezik na stranici modala (npr. s engleskog na španjolski), detalji proizvoda se dohvaćaju na odabranom jeziku, a sadržaj modala se besprijekorno ažurira. Nadalje, stranica bi mogla otkriti lokaciju korisnika (uz pristanak) i prikazati informacije o dostavi relevantne za njihovu regiju unutar modala.

Najbolje prakse za korištenje Interception Routes

Alternative za Interception Routes

Iako Interception Routes nude moćno rješenje za modalne i overlay obrasce, mogu se razmotriti i drugi pristupi:

Zaključak

Next.js Interception Routes pružaju robustan i elegantan način za implementaciju modalnih i overlay obrazaca u vašim web aplikacijama. Korištenjem ove moćne značajke možete stvoriti besprijekorna, SEO-prijateljska i korisnički orijentirana iskustva. Iako postoje alternativni pristupi, Interception Routes nude jedinstvenu kombinaciju prednosti, što ih čini vrijednim alatom u arsenalu svakog Next.js developera.

Dodatni resursi